<!DOCTYPE html>
<html>
<head>
    <title>Helium Energy Level Diagram</title>
</head>
<body>
<canvas id="helium-energy-levels" width="600" height="420"></canvas>
<script>
    const canvas = document.getElementById('helium-energy-levels');
    const ctx = canvas.getContext('2d');

    // --- Style and Configuration ---
    ctx.fillStyle = 'black';
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    const mainFontSize = 20;
    const scriptFontSize = 14;
    const mainFont = `${mainFontSize}px Arial`;
    const scriptFont = `${scriptFontSize}px Arial`;
    ctx.textBaseline = 'middle';

    // Energy level Y-coordinates
    const yA = 320; // 1 ¹S₀
    const yD = 260; // 2 ³S₁
    const yB = 220; // 2 ¹S₀
    const yC = 140; // 2 ¹P₁
    const yE = 140; // 2 ³P₂,₁,₀

    // Helper function to draw a line
    function drawLine(x1, y1, x2, y2) {
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.stroke();
    }

    // --- Draw the surrounding frame ---
    ctx.strokeRect(30, 40, 540, 320);

    // --- Draw Headers ---
    ctx.font = mainFont;
    ctx.textAlign = 'center';
    ctx.fillText('Singlet', 170, 70);
    ctx.fillText('Triplet', 410, 70);

    // --- Draw Singlet States ---
    const xSingletLineStart = 90;
    const singletLineLen = 100;
    const xSingletLineEnd = xSingletLineStart + singletLineLen;
    const scriptOffsetY = 8; // Vertical offset for superscripts/subscripts

    // Level A: ¹S₀
    ctx.font = mainFont;
    ctx.textAlign = 'right';
    ctx.fillText('A', xSingletLineStart - 20, yA);
    drawLine(xSingletLineStart, yA, xSingletLineEnd, yA);
    // Term Symbol ¹S₀
    ctx.textAlign = 'left';
    let xPos = xSingletLineEnd + 10;
    ctx.font = scriptFont;
    ctx.fillText('1', xPos, yA - scriptOffsetY);
    let xNext = xPos + ctx.measureText('1').width;
    ctx.font = mainFont;
    ctx.fillText('S', xNext, yA);
    xNext += ctx.measureText('S').width;
    ctx.font = scriptFont;
    ctx.fillText('0', xNext, yA + scriptOffsetY);

    // Level B: 2¹S₀
    ctx.font = mainFont;
    ctx.textAlign = 'right';
    ctx.fillText('B', xSingletLineStart - 20, yB);
    drawLine(xSingletLineStart, yB, xSingletLineEnd, yB);
    // Term Symbol 2¹S₀
    ctx.textAlign = 'left';
    xPos = xSingletLineEnd + 10;
    ctx.font = mainFont;
    ctx.fillText('2', xPos, yB);
    xNext = xPos + ctx.measureText('2').width;
    ctx.font = scriptFont;
    ctx.fillText('1', xNext, yB - scriptOffsetY);
    xNext += ctx.measureText('1').width;
    ctx.font = mainFont;
    ctx.fillText('S', xNext, yB);
    xNext += ctx.measureText('S').width;
    ctx.font = scriptFont;
    ctx.fillText('0', xNext, yB + scriptOffsetY);

    // Level C: 2¹P₁
    ctx.font = mainFont;
    ctx.textAlign = 'right';
    ctx.fillText('C', xSingletLineStart - 20, yC);
    drawLine(xSingletLineStart, yC, xSingletLineEnd, yC);
    // Term Symbol 2¹P₁
    ctx.textAlign = 'left';
    xPos = xSingletLineEnd + 10;
    ctx.font = mainFont;
    ctx.fillText('2', xPos, yC);
    xNext = xPos + ctx.measureText('2').width;
    ctx.font = scriptFont;
    ctx.fillText('1', xNext, yC - scriptOffsetY);
    xNext += ctx.measureText('1').width;
    ctx.font = mainFont;
    ctx.fillText('P', xNext, yC);
    xNext += ctx.measureText('P').width;
    ctx.font = scriptFont;
    ctx.fillText('1', xNext, yC + scriptOffsetY);

    // --- Draw Triplet States ---
    const xTripletLineStart = 330;
    const tripletLineLen = 100;
    const xTripletLineEnd = xTripletLineStart + tripletLineLen;

    // Level D: 2³S₁
    ctx.font = mainFont;
    ctx.textAlign = 'right';
    ctx.fillText('D', xTripletLineStart - 20, yD);
    drawLine(xTripletLineStart, yD, xTripletLineEnd, yD);
    // Term Symbol 2³S₁
    ctx.textAlign = 'left';
    xPos = xTripletLineEnd + 10;
    ctx.font = mainFont;
    ctx.fillText('2', xPos, yD);
    xNext = xPos + ctx.measureText('2').width;
    ctx.font = scriptFont;
    ctx.fillText('3', xNext, yD - scriptOffsetY);
    xNext += ctx.measureText('3').width;
    ctx.font = mainFont;
    ctx.fillText('S', xNext, yD);
    xNext += ctx.measureText('S').width;
    ctx.font = scriptFont;
    ctx.fillText('1', xNext, yD + scriptOffsetY);

    // Level E: 2³P₂,₁,₀
    ctx.font = mainFont;
    ctx.textAlign = 'right';
    ctx.fillText('E', xTripletLineStart - 20, yE);
    drawLine(xTripletLineStart, yE, xTripletLineEnd, yE);
    // Term Symbol 2³P₂,₁,₀
    ctx.textAlign = 'left';
    xPos = xTripletLineEnd + 10;
    ctx.font = mainFont;
    ctx.fillText('2', xPos, yE);
    xNext = xPos + ctx.measureText('2').width;
    ctx.font = scriptFont;
    ctx.fillText('3', xNext, yE - scriptOffsetY);
    xNext += ctx.measureText('3').width;
    ctx.font = mainFont;
    ctx.fillText('P', xNext, yE);
    xNext += ctx.measureText('P').width;
    ctx.font = scriptFont;
    ctx.fillText('2,1,0', xNext, yE + scriptOffsetY);

    // --- Draw Principal Quantum Number (n) Labels ---
    ctx.font = mainFont;
    ctx.textAlign = 'left';
    ctx.fillText('n = 1', 480, yA);
    ctx.fillText('n = 2', 480, yD);

    // --- Draw Figure Caption ---
    ctx.font = mainFont;
    ctx.textAlign = 'center';
    ctx.fillText('Fig. 1.24', 300, 390);
</script>
</body>
</html>